<template>
  <div class="deail">
    <header>
      <p>
        <van-icon name="arrow-left" @click="fanhui" />
        <van-icon name="wap-home-o" />
      </p>
      <span>详情</span>
      <b></b>
    </header>
    <main>
      <div class="back">
        <div class="backe">
          <dl>
            <dd>
              <p>{{ data.title }}</p>
              <h3>{{ data.name }}</h3>
              <p>{{ data.tel }}</p>
              <p>{{ data.title }}{{ data.price }}号东50米</p>
            </dd>
            <dt>
              <img :src="data.img" alt="" />
            </dt>
          </dl>
        </div>
      </div>
      <div class="backes">
        <van-tabs>
          <van-tab title="买房">
            <dl v-for="(item, ind) in liste" :key="ind">
              <dt>
                <img :src="item.img" alt="" />
              </dt>
              <dd>
                <h4>{{ item.title }}</h4>
                <p>
                  <span>2室2厅1卫 | 96m^</span> <span>{{ item.word }}</span>
                </p>
                <p>
                  <span
                    style="
                      font-weight: bolder;
                      color: orangered;
                      font-size: 16px;
                    "
                    >{{ item.price }}万 </span
                  ><b>11458.33/m^</b> <span>2天前</span>
                </p>
              </dd>
            </dl>
          </van-tab>
          <van-tab title="租房">内容 2</van-tab>
        </van-tabs>
      </div>
    </main>
    <footer>
      <p>
        <van-icon name="share-o" />
        <span>分享</span>
      </p>
      <div class>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" class="butert" @click="liaotian">
          在线咨询
        </van-button>
        <van-button
          color="linear-gradient(to right,#ff6034, #ee0a24)" class="bret" @click="dianhua">
          电话咨询
        </van-button>
      </div>
    </footer>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      data: [],
      liste: [],
    };
  },
  created() {
    let { id } = this.$route.params;
    axios.get("http://127.0.0.1:7001/getList").then((res) => {
      let obj = res.data.data.find((item) => {
        if (item.id.toString() === id) {
          return item;
        }
      });
      this.data = obj;
      console.log("obj...", obj);
    });
    axios.get("http://127.0.0.1:7001/getList").then((res) => {
      this.liste = res.data.data;
      console.log(res.data.data);
    });
  },
  methods: {
    fanhui() {
      this.$router.go("-1");
    },
   dianhua(){
       this.$router.push("/dianhua")
   },
   liaotian(){
       this.$router.push("/liaotian")
   }
  },
};
</script>

<style scoped lang="scss">
.deail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  align-items: center;
  background: cornflowerblue;
  font-size: 16px;
  color: #fff;
  font-weight: bolder;
  p {
    width: 100px;
    height: 70%;
    border-radius: 20px;
    border: 1px solid #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 18px;
  }
  span {
    width: 100px;
  }
}
main {
  flex: 1;
  overflow: scroll;
  .back {
    width: 100%;
    height: 220px;
    background: cornflowerblue;
    border-radius: 0 0 40% 40%;
    padding-top: 40px;
  }
}
.backe {
  width: 80%;
  height: 80%;
  background: #fff;
  border-radius: 15px;
  display: flex;
  margin: 0 auto;
  dl {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    dd {
      width: 60%;
      height: 100%;
      p {
        padding: 10px;
      }
      h3 {
        font-size: 16px;
        padding: 0 10px;
      }
    }
    dt {
      width: 40%;
      height: 100%;
      border-left: 4px solid #e6a23c;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0 15px 15px 0;
      }
    }
  }
}
.van-tab__pane {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  dl {
    width: 100%;
    display: flex;

    border-bottom: 1px solid #ccc;
    padding: 20px;
    dt {
      width: 40%;
      img {
        width: 100%;
        height: 120px;
        border-radius: 15px;
      }
    }
    dd {
      width: 60%;
      h4 {
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
        font-size: 18px;
        font-weight: bolder;
      }
      p {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
        align-items: center;
      }
    }
  }
}
footer {
  width: 100%;
  height: 50px;
  background: #efefef;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  align-items: center;
  p {
    width: 50px;
    height: 50px;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    i {
      width: 100%;
      font-size: 30px;
    }
    span {
      width: 100%;
    }
  }
}
.butert{
    height: 40px;
    border-radius: 15px 0 0 15px;
}
.bret{
    height: 40px;
     border-radius: 0 15px 15px 0;
}
</style>